<template>
	<view class="title-box" :class="{
      border: border,
    }" :style="{ padding: padding, backgroundColor: bgColor }" @click="handleClick">
		<view id="tLeft" class="tLeft" :class="{
        bold: bold,
      }" :style="{
        color: color,
        fontSize: size,
        '-webkit-line-clamp': line,
      }">
			<text>{{ label }}</text>
			<view v-if="bottomColor" class="borderBottom" :style="{
          left: '0',
          bottom: bottom + 'rpx',
          width: bmWidth,
          height: bottomHeight + 'rpx',
          backgroundColor: bottomColor,
        }"></view>
		</view>
		<view v-if="rightText && !$slots.right" class="title-right" :style="{
        color: rightColor,
      }" @click="handleRight">
			{{ rightText }}
		</view>
		<slot name="right"></slot>
	</view>
</template>

<script>
	export default {
		props: {
			// 标题文字
			label: {
				type: String,
				default: "",
				required: true,
			},
			// 标题颜色
			color: {
				type: String,
				default: "#222222",
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "transparent",
			},
			// 字体大小
			size: {
				type: String,
				default: "32rpx",
			},
			// 是否加粗
			bold: {
				type: [Boolean, String],
				default: true,
			},
			// 距离底部距离
			bottom: {
				type: [String, Number],
				default: 20,
			},
			// 下划线颜色
			bottomColor: {
				type: String,
				default: "",
			},
			// 下划线宽度 (rpx)
			bottomWidth: {
				type: [String, Number],
				default: "auto",
			},
			// 下划线高度 (rpx)
			bottomHeight: {
				type: [String, Number],
				default: 10,
			},
			// 下边框线
			border: {
				type: Boolean,
				default: false,
			},
			// 内边距
			padding: {
				type: String,
				default: "20rpx 0",
			},
			// 右侧文字 (优先级低于插槽)
			rightText: {
				type: String,
				default: "",
			},
			// 右侧字体颜色
			rightColor: {
				type: String,
				default: "#3BA199",
			},
			// 显示行数
			line: {
				type: [String, Number],
				default: 1,
			},
		},
		data() {
			return {
				bmWidth: "",
			};
		},
		watch: {
			// 动态修改标题时改变宽度
			label() {
				this.setBottomWidth();
			},
		},
		mounted() {
			this.setBottomWidth();
		},
		methods: {
			setBottomWidth() {
				if (isNaN(Number(this.borderBottom))) {
					uni
						.createSelectorQuery()
						.in(this)
						.select("#tLeft")
						.boundingClientRect((rect) => {
							this.bmWidth = rect.width * 2 - 6 + "rpx";
						})
						.exec();
				} else {
					this.bmWidth = this.bottomWidth + "rpx";
				}
			},
			// 整行点击事件 (会覆盖右侧事件)
			handleClick() {
				this.$emit("click");
			},
			// 右侧事件
			handleRight() {
				this.$emit("clickRight");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.title-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.tLeft {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
		}

		text {
			position: relative;
			z-index: 1;
		}

		.borderBottom {
			position: absolute;
			left: 0;
			z-index: 0;
		}

		.title-right {
			font-size: 28rpx;
		}
	}

	.border {
		border-bottom: 1rpx solid #d9d9d999;
	}

	.bold {
		font-weight: 600;
	}
</style>